import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import {
    TopicWrapper,
    TopicItem,
    MoreTopic
} from '../style'

class Topic extends PureComponent{
    
    render() {
        const { topicList } = this.props;
        return (
            <TopicWrapper>
                {
                    topicList.map((item) => {
                        return (
                        <TopicItem key={item.get('id')}>
                            <img alt="" className='topic-pic' src={item.get('imgUrl')} />
                            {item.get('title')}
                        </TopicItem>
                        )
                    })
                }
                <MoreTopic>更多热门专题<i className="iconfont">&#xe770;</i></MoreTopic>
            </TopicWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        topicList: state.getIn(['home', 'topicList'])
    }
}

export default connect(mapState, null)(Topic)